<template>
<div class="boos">
  
     <ul class="Ul">
            <li @click="BtnClick(index)"  :class="{active:index==isClick}" v-for="(items,index) in movies" :key="index">{{items}}</li>
        </ul>
    <div class="box">
      <div>
        <span class="box-right">输入搜索</span>
        <el-input
            class="ipt"      
            placeholder="请输入要搜索的手机号"
            v-model="search"
            clearable>
        </el-input>
      </div>
           <div class="block">
    <span class="demonstration">上次消费时间</span>
    <el-date-picker
      v-model="value2"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
  <div>

    <el-button type="primary" @click="searchBtn" size="medium">查询</el-button>
    <el-button type="success" @click="reset" size="medium">重置</el-button>
    <el-button type="warning" @click="deles" size="medium">批量删除</el-button>
  </div>
    </div>
    </div>
</template>

<script>
import eventBus from '@/utils/eventBus';
  export default {
    
    data() {
      return {
        isClick: 0,
         movies:['全部','待支付','已关闭','待确认','学习中','已完成'],
         pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
        value2: '',
         input: '',
         search:''
      }
    },
    methods:{
       searchBtn(){
        this.$emit("searchData",this.search)   
      },
       BtnClick(index) {
        this.isClick = index;
        eventBus.$emit('types',index)
     },
     deles(){
      eventBus.$emit('deleteArr')
     },
     reset(){
      this.isClick= 0,
       eventBus.$emit('resetArr')
     }
    }
  }
</script>

<style lang='less' scoped>

.boos{
       background: #FFFFFF;
}
.box{
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 14px;
    font-weight: 700;
}
.Ul{
    display: flex;
    margin-left: 40px;
    text-align: center;
    
}
.Ul>li{
   margin: 20px;
     margin-right: 30px; 
     width: 60px;
     cursor: pointer;
}

.active {
  color:#409EFF;
  padding-bottom: 15px;
  border-bottom:3px solid skyblue;
}
.demonstration,.box-right{
  margin-right:10px ;
}

.ipt{
    width: 160px;
}

.xiala{
    width: 130px;
}
</style>
<style>
.el-input--suffix .el-input__inner {
    padding-right: 0px!important;
    font-size: 12px;
    color:black;
}
.el-table .cell{
text-align: center;
}
</style>